<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件捕获和事件冒泡</title>
  <style>
    #box1 {
      height: 500px;
      width: 500px;
      background-color: lightcyan;
    }
    #box2 {
      height: 300px;
      width: 300px;
      background-color: lightgreen;
    }

    #box3 {
      height: 100px;
      width: 100px;
      background-color: hotpink;
    }
  </style>
</head>
<body>
<div id="box1" onclick="box1()">
  <div id="box2" onclick="box2()">
<!--    <div id="box3" onclick="box3()">-->
    <div id="box3" >
    </div>
  </div>
</div>
<script>
  // 事件处理阶段
  //    1. 事件捕获阶段，从外向里进行事件捕获
  //    2. 从里向外执行事件冒泡，执行事件冒泡的时候会触发对应的函数


  function box1() {
    alert("box1");
  }

  function box2() {
    event.stopPropagation()
    alert("box2");
  }

  // function box3() {
  //   // api虽然过期了，但是还可以用
  //   event.stopPropagation();
  //   alert("box3");
  // }
  // 通过这种绑定方式我们在括号里加的数据就是事件源对象数据
  document.getElementById("box3").onclick = function (e) {
    e.stopPropagation();
    alert("box3")
  }

</script>

</body>
</html>